<template>
  <el-dialog
    @close="handlerClose"
    @open="handleOpen"
    :title="checkFileObj.name"
    fullscreen
    :visible.sync="isCheckFile"
    element-loading-text="拼命加载中"
    top="20"
  >
    <iframe
      :src="embedUrl"
      :width="width - 90 + 'px'"
      :height="height - 90 + 'px'"
    ></iframe>
  </el-dialog>
</template>

<script>
export default {
  name: "checkFileDialog",
  props: {
    isCheckFile: {
      type: Boolean,
      default: true,
    },
    checkFileObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      embedUrl: "",
      width: null,
      height: null,
    };
  },
  methods: {
    handlerClose() {
      this.embedUrl = "";
      this.height = null;
      this.width = null;
      window.removeEventListener("resize", this.updateDimensions);
      this.$emit("closeCheckFile");
    },
    updateDimensions() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
      // console.log(this.width, this.height, "w/h");
    },
    handleOpen() {
      this.updateDimensions();
      window.addEventListener("resize", this.updateDimensions);
      this.$nextTick(() => {
        this.embedUrl = `https://view.officeapps.live.com/op/view.aspx?src=${this.checkFileObj.url.url}&wdOrigin=BROWSELINK`;
      });
    },
  },
};
</script>

<style lang="scss">
.chat-history {
  display: flex;
  height: 100%;
}
</style>
